<!--
 * @Date: 2022-04-18 10:00:13
 * @Author: 陶子
 * @LastEditTime: 2022-08-24 17:26:07
 * @FilePath: \jk_one-stop_cloud_mobile_v1.0\src\views\qualityManagement\qualityTask\taskDetail.vue
 * @pageName: 这是--(质检任务详情)--页面
-->
<template>
  <div class="recordDetail">
    <Navbar appTitle="质检任务详情" />
    <!--头部-->
    <div class="d-head" :style="{top: GLOBAL.currentEnvironment ? '0' : ''}">
      <div class="content">
        <div class="left">
          <div class="title">
            {{ taskInfo.processCode || '--' }}-{{taskInfo.processName}}
          </div>
          <div class="row">生产物料：{{ taskInfo.goodsCode || '--' }} - {{ taskInfo.goodsName || '--' }}</div>
          <div class="row">规格：{{ taskInfo.goodsSpec || '--' }}</div>
          <div class="row">基本单位：{{ taskInfo.goodsBasicUnitText || '--' }}</div>
          <div class="row">工单编号：{{ taskInfo.orderCode || '--' }}</div>
        </div>
      </div>
      <div class="labelBox">
        <div class="labelLeft">{{ taskInfo.orderStatusName}}</div>
        <div class='labelRight'>{{ taskInfo.reportStatusName || '--' }}</div>
      </div>
    </div>

    <div class="contentBoxs">
      <div class="otherTaps">
        <div class="title">
          <span>
            <span class="icon"></span>
            <span class="content">任务信息</span>
          </span>
        </div>
        <div class="content">
          <div class="row">
            <span class="r-label">计划生产：</span>
            <span
              class="r-column">{{ taskInfo.taskPlanNum || "--" }}{{taskInfo.processWorkUnitText}}（{{taskInfo.orderGoodsNum}}{{taskInfo.goodsBasicUnitText|| '--'}}）</span>
          </div>
          <div class="row">
            <span class="r-label">合格品：</span>
            <span class="r-column">{{ taskInfo.qualifiedNum}}{{taskInfo.processWorkUnitText}}</span>
          </div>
          <div class="row">
            <span class="r-label">不合格品：</span>
            <span class="r-column">{{ taskInfo.notQualifiedNum}}{{taskInfo.processWorkUnitText}}</span>
          </div>
          <div class="row">
            <span class="r-label">可报工：</span>
            <span class="r-column">{{ taskInfo.availableNumForReport>0?taskInfo.availableNumForReport:0}}{{taskInfo.processWorkUnitText}}</span>
          </div>
          <div class="row">
            <span class="r-label">工序进度：</span>
            <span class="r-column">{{ taskInfo.reportNum}}/{{ taskInfo.taskPlanNum || '0' }}{{taskInfo.processWorkUnitText}}（{{ taskInfo.completePercent}}%）</span>
          </div>

          <div class="row">
            <span class="r-label">班组：</span>
            <span class="r-column">{{ taskInfo.teamName || '--' }}</span>
          </div>
          <div class="row">
            <span class="r-label">计划时间：</span>
            <span class="r-column">{{moment(taskInfo.planStartTime).format('YYYY-MM-DD HH:mm')}} ~
              {{moment(taskInfo.planEndTime).format('YYYY-MM-DD HH:mm') }}</span>
          </div>
          <div class="row">
            <span class="r-label">设备：</span>
            <span class="r-column">{{ taskInfo.deviceName   || '--' }}</span>
          </div>
          <div class="row">
            <span class="r-label">工序要求：</span>
            <span class="r-column">{{ taskInfo.processRequire  || '--' }}</span>
          </div>
        </div>
      </div>
      <div class="otherTaps" style="background:none;padding:0">
        <div class="title" style="background:#fff;padding:0.16rem;">
          <span>
            <span class="icon"></span>
            <span class="content">生产批次</span>
          </span>
          <span class="FormTit">共{{total}}，已流转{{statics}}</span>
        </div>
        <pageList
          ref="pageList"
          :columns="columns"
          :listUrl="listUrl"
          @listTotal="listTotal"
        >
        <div slot="body" slot-scope="{ item }">
          <div class="batch-column">
            <div class="rt-row">
              <div class="column">
                <span class="column-t">当前计划数：</span>
                <span class="column-c">{{ `${item.planProductionNumText}${item.currentWorkUnitText}` }}（{{ `${item.planProductionBasicNumText}${taskInfo.goodsBasicUnitText}` }}）</span>
              </div>
              <div class="column">
                <span class="column-t">已报工数：</span>
                <span class="column-c">{{ item.reportNumText }}{{item.currentWorkUnitText}}</span>
              </div>
              <div class="column">
                <span class="column-t">合格数：</span>
                <span class="column-c">{{ item.qualifiedNumText }}{{item.currentWorkUnitText}}</span>
              </div>
              <div class="column">
                <span class="column-t">不合格数：</span>
                <span class="column-c">{{ item.notQualifiedNumText }}{{item.currentWorkUnitText}}</span>
              </div>
            </div>
          </div>
        </div>
        </pageList>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import Navbar from "@/components/navBar/navBar_right";
import { taskDetailApi, relationBatchStaticsByTaskId } from "@/api/mobile";
import pageList from "@/components/pageList";
export default {
  components: { Navbar,pageList },
  data() {
    return {
      moment,
      taskInfo: {},
      parentId: "",
      listUrl: '', //列表接口
      total: 0,
      statics: '0',
      columns: {
        titleKey: "batchCode", //标题
        content: [
          //内容
          {
            name: "生产物料",
            key: ["goodsName"],
          },
          {
            name: "处理数量",
            key: ["num", "reportWorkUnitText"],
          },
        ],
        labelKey: ["convertStatus", "typeName", "inflowTime"], //标签
        // operation: [],
      },
    };
  },
  computed: {},
  mounted() {},
  created() {
    this.parentId = this.$route.query.taskId;
    this.listUrl = `/mess/messProductBatch/queryRelationBatchListByTaskId?taskId=${this.parentId}`
    this.getDetail();
  },
  methods: {
    listTotal(v) {
      this.total = v ? v : 0
    },
    getDetail() {
      let obj = {
        id: this.parentId,
      };
      taskDetailApi(obj).then((res) => {
        if (res.success) {
          if (res.result) {
            this.taskInfo = res.result;
          }
        } else {
          this.$antdMessage.warning(res.message);
        }
      });
      relationBatchStaticsByTaskId({taskId: this.parentId}).then(res => {
        this.statics = res.result.convertedNumText || '0'
      })
    },
  },
};
</script>
<style lang="scss" scoped>
.recordDetail {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  .contentBoxs {
    flex: 1;
    overflow-y: scroll;
  }
  .d-head {
    width: 100%;
    padding: 0.16rem 0.16rem 0.16rem 0.16rem;
    background: #ffffff;
    z-index: 999;
    .content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        width: 2.8rem;
        // border: 1px solid red;
        .title {
          font-size: 0.16rem;
          font-family: PingFang SC;
          font-weight: 500;
          color: #191f25;
          line-height: 0.22rem;

          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          -o-text-overflow: ellipsis;
        }
        .row {
          font-size: 0.14rem;
          font-family: PingFang SC;
          font-weight: 400;
          color: #888888;
          margin-top: 0.16rem;
        }
      }
      .right {
        // border: 1px solid red;
        width: 0.6rem;
        .rightImg {
          display: block;
          width: 0.55rem;
          height: 0.55rem;
          //   margin-left: 0.45rem;
          // border: 1px solid blue;
        }
      }
    }
  }
  .otherTaps {
    background: #ffffff;
    padding: 0.16rem;
    margin-top: 0.1rem;
    .title {
      padding-bottom: 0.1rem;
      border-bottom: 1px solid #eeeeee;
      display: flex;
      justify-content: space-between;
      .icon {
        display: inline-block;
        width: 0.03rem;
        height: 0.14rem;
        background: #1890ff;
      }
      .content {
        width: 0.63rem;
        height: 0.16rem;
        font-size: 0.16rem;
        font-family: PingFang SC;
        font-weight: bold;
        color: #191f25;
        line-height: 0.22rem;
        margin-left: 0.1rem;
      }
    }
    .content {
      .row {
        font-size: 0.14rem;
        font-family: PingFang SC;
        font-weight: 400;
        margin-top: 0.16rem;
        display: flex;
        .r-label {
          color: #888888;
          display: block;
          width: 0.7rem;
          //   border: 1px solid red;
        }
        .r-column {
          display: block;
          color: #191f25;
          width: 2.5rem;
          //   border: 1px solid red;
          //    width: 1rem;
        }
      }
      .fhrow {
        display: flex;
        .fhImg {
          width: 0.55rem;
          height: 0.55rem;
          border-radius: 0.1rem;
        }
        .rt-column {
            width: 2.55rem;
        //   height: 2.55rem;
          margin-left: 0.2rem;
          .rt-title {
            font-size: 0.16rem;
            font-family: PingFang SC;
            font-weight: 500;
            color: #191f25;
            margin-bottom: 0.16rem;
          }
          .rt-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.23rem;
            .column {
            //    border: 1px solid red;
               width: 1.5rem;
              .column-t {
                font-size: 0.14rem;
                font-family: PingFang SC;
                font-weight: 400;
                color: #888888;
                display: block;
                width: 100%;
                margin-bottom: 0.03rem;
                
              }
              .column-c {
                font-size: 0.16rem;
                font-family: PingFang SC;
                font-weight: 400;
                color: #191f25;
                display: block;
                width: 100%;
              }
            }
          }
        }
      }
    }
  }
}
.labelBox {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 0.19rem;
  color: #1890ff;
  .labelLeft {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f0f6fe;
    border-radius: 0.02rem;
    box-sizing: border-box;
    padding: 0.03rem 0.07rem;
    margin-right: 0.05rem;
    font-size: 0.11rem;
  }
  .labelRight {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f0f6fe;
    border-radius: 0.02rem;
    box-sizing: border-box;
    padding: 0.03rem 0.07rem;
    font-size: 0.11rem;
  }
}
.batch-column {
  padding: 0.17rem 0 0 0.17rem;
  .arrow {
    color: #1890ff;
    // float: right;
    // margin-right: -0.05rem;
    // display: block;
    position: absolute;
    right: 0.15rem;
  }
  //  border: 1px solid red;
  .rt-row {
    margin-bottom: 0.1rem;
    .column {
      width: 100%;
      .column-t {
        font-size: 0.14rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: #888888;
        margin-bottom: 0.03rem;
      }
      .column-c {
        font-size: 0.14rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: #191f25;
      }
    }
  }
}
</style>
